<!--
 * @Description: 
 * @Date: 2022-06-30 10:17:53
 * @LastEditTime: 2022-11-02 16:37:26
 * @FilePath: \vue3\src\views\vue3Study\reactiveTest.vue
-->
<template>
  Reactive{{ valueReactive.name }}
  myName:{{ name }}{{ age }}
  <button @click="changeReactive()">改变Reactive</button>
  <button @click="changeReactiveAll()">改变ReactiveALL</button>
  <button @click="changeReactiveAsync()">异步改变Reactive</button>
  <button @click="clearObject()">清空Reactive</button>
  readonly{{ readonlyValue }}
  <button @click="changeReadOnly()">改变readOnly</button>
  <div>
    ReactiveValue：{{ shallowReactiveValue }}
    <button @click="changeshallowReactive1()">改变ReactiveValue1</button>
    <button @click="changeshallowReactive2()">改变ReactiveValue2</button>
    <button @click="changeshallowReactive3()">改变ReactiveValue3</button>
    <button @click="changeshallowReactive4()">改变ReactiveValue4</button>
  </div>
</template>
<script>
import {
  ref,
  shallowReactive,
  shallowRef,
  triggerRef,
  customRef,
  reactive,
  readonly,
  toRefs,
} from "vue";
export default {
  setup() {
    //改变Reactive
    let valueReactive = reactive({
      name: "乌瑟尔",
      age: 18
    });
    let { name, age } = toRefs(valueReactive)


    function changeReactive() {
      valueReactive.name = "卡德加";
    }
    function changeReactiveAll() {
      valueReactive = { name: "吉安娜" };
      console.log(valueReactive.name);
    }
    function changeReactiveAsync() {
      setTimeout(() => {
        valueReactive.name = "奈法利安";
        console.log(valueReactive.name);
      }, 1000);
    }
    let readonlyValue = readonly(valueReactive);
    function changeReadOnly() {
      readonlyValue.name = "卡德加";
    }
    let shallowReactiveValue = shallowReactive({
      name: "爷爷",
      child: {
        name: "爸爸",
        child: {
          name: "孙子",
        },
      },
    });
    function changeshallowReactive1() {
      shallowReactiveValue.name = "卡德加爷爷";
      shallowReactiveValue.child.name = "卡德加爸爸";
      shallowReactiveValue.child.child.name = "卡德加孙子";
      // setTimeout(() => {
      //   shallowReactiveValue.child.name = "卡德加爸爸";
      //   shallowReactiveValue.child.child.name = "卡德加孙子";
      //   console.log(shallowReactiveValue);
      // }, 10);
    }
    function changeshallowReactive2() {
      shallowReactiveValue.child.name = "赵刚爸爸";
      console.log(shallowReactiveValue);
    }
    function changeshallowReactive3() {
      shallowReactiveValue.child.child.name = "李云龙孙子";
      console.log(shallowReactiveValue);
    }
    function changeshallowReactive4() {
      shallowReactiveValue.name = "易学习爷爷";
      console.log(shallowReactiveValue);
    }
    let clearObject = () => {
      const keys = Object.keys(valueReactive);
      let obj = {};
      keys.forEach((item) => {
        obj[item] = "";
      });
      Object.assign(valueReactive, obj);
    }
    return {
      valueReactive,
      changeReactive,
      changeReactiveAll,
      changeReactiveAsync,
      readonlyValue,
      changeReadOnly,
      shallowReactiveValue,
      changeshallowReactive1,
      changeshallowReactive2,
      changeshallowReactive3,
      changeshallowReactive4,
      name,
      age,
      clearObject
    };
  },
};
</script>
